<template>
    <div class="container">
        <div class="record_content flex-1 light-little-scroll">
            <div v-for="(item, index) in recordList" :key="index" class="message_item my-10 mx-16">
                <div :class="item._isReply?'reverse record_content_img_wrap':'record_content_img_wrap'">
                    <img :src="item._avatar" alt class="record_content_img" />
                    <div class="record_content_name">{{ item.name }}</div>
                    <div class="record_content_time">{{ item._time }}</div>
                </div>
                <div v-if="item._content" :class="item._isReply?'reverse message_item_content_custom message_item_content':'message_item_content'">
                    <div class=" message_text">{{ item._content }}</div>
                </div>
                <div v-if="item.fileUrl" :class="item._isReply?'reverse record_content_file_warp':'record_content_file_warp'">
                    <img :src="item.fileUrl" alt class="record_content_file" />
                </div>
            </div>
        </div>
        <div class="editor">
            <com-tinymce
                ref="editor"
                v-model="value"
                :defaultInit="defaultInit"
                style="height: calc(100% - 60px);"
                v-bind="$attrs"
                v-on="$listeners"
            ></com-tinymce>
            <div class="sendHandle">
                <el-button class="button" size="mini" type="primary" @click="sendHandle">发 送</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@service";

export default {
    data() {
        return {
            recordList: [

                {
                    _avatar: "https://img0.baidu.com/it/u=4204117236,2912287479&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500",
                    fileUrl: "https://img0.baidu.com/it/u=4204117236,2912287479&fm=253&fmt=auto&app=138&f=JPEG?w=747&h=500",
                    _content: "test22223",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: true,
                },
                {
                    _avatar: "https://img0.baidu.com/it/u=2801556800,911788335&fm=253&fmt=auto&app=138&f=JPEG?w=352&h=500",
                    fileUrl: "https://img0.baidu.com/it/u=2801556800,911788335&fm=253&fmt=auto&app=138&f=JPEG?w=352&h=500",
                    _content: "test111",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: false,
                },
                {
                    _avatar: "https://img2.baidu.com/it/u=3624090293,1603259839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=710",
                    fileUrl: "https://img2.baidu.com/it/u=3624090293,1603259839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=710",
                    _content: "test22223",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: true,
                },
                {
                    _avatar: "https://img1.baidu.com/it/u=948282742,4171512851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    fileUrl: "https://img1.baidu.com/it/u=948282742,4171512851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    _content: "test111",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: false,
                },
                {
                    _avatar: "https://img0.baidu.com/it/u=510773993,2813942376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    fileUrl: "https://img0.baidu.com/it/u=510773993,2813942376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    _content: "test22223",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: true,
                },
                {
                    _avatar: "https://img1.baidu.com/it/u=948282742,4171512851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    fileUrl: "https://img1.baidu.com/it/u=948282742,4171512851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    _content: "test111",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: false,
                },
                {
                    _avatar: "https://img0.baidu.com/it/u=510773993,2813942376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    fileUrl: "https://img0.baidu.com/it/u=510773993,2813942376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
                    _content: "test22223",
                    name: "rzy",
                    _type: "text",
                    _time: "2022-07-21",
                    _isReply: true,
                },
            ],
            defaultInit: {
                language: "zh_CN",
                placeholder: "",
                branding: false, //隐藏右下角技术支持
                block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3",
                elementpath: false,
                preview_styles: false,
                menubar: false,//隐藏菜单栏
                statusbar: false,//隐藏状态栏
                menu: {},
                font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
                // toolbar: " bold italic link unlink imageSelector",
                toolbar1: 'undo redo | styleselect | bold italic | link imageSelector',
            },
            value: null,
        };
    },
    computed: {},
    mounted() {
    },
    methods: {
        async sendHandle() {
            let serviceName = "";
            let params = {
                value: this.$refs.editor.myValue,
            };
            console.log("params", params);
            // let result = await service(serviceName, {
            //     data: params,
            // });
            // if (result.code === "200") {
            //     this.value = "";
            // } else {
            //     this.$message({ type: "error", message: result.message, duration: 1000 });
            // }
        },
    },
    watch: {},
};

</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    
    .message_item {
        display: flex;
        flex-direction: column;
        
        .reverse {
            flex-direction: row-reverse;
        }
    }
    
    .message_text {
        border-radius: 5px;
        display: inline-block;
        padding: 6px;
        position: relative;
        
    }
    
    .message_text:after {
        content: "";
        position: absolute;
        background: transparent;
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid #ebebeb;
        border-right: 5px solid transparent;
        top: -10px;
        left: 15px;
    }
    
    .message_item_content_custom .message_text:after {
        border-bottom: 5px solid #45d188;
        top: -10px;
        right: 15px;
        left: inherit;
    }
    
    .message_item_content {
        position: relative;
        margin: 5px 50px;
        display: flex;
        
        .message_text {
            color: #000;
            background-color: #ebebeb;
        }
    }
    
    
    .message_item_content_custom {
        .message_text {
            color: #fff;
            background-color: #45d188;
        }
    }
    
    .sendHandle {
        height: 60px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        
        .button {
            height: 40px;
            background-color: #116dbf;
            font-size: 7px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 10px;
        }
    }
    
    .record_content_img_wrap {
        display: flex;
        align-items: center;
        
        .record_content_img {
            margin: 0 5px;
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        
        .record_content_name {
            margin: 0 10px;
        }
        
        .record_content_time {
            //margin: 0 10px;
            font-size: 12px;
        }
        
    }
    
    .record_content_file_warp {
        display: flex;
        
        .record_content_file {
            max-width: 170px;
            max-height: 260px;
            margin: 5px 50px;
            
        }
    }
    
    .editor {
        height: 50%;
        width: 100%;
    }
}
</style>